Code view

Simple code blocks

Here is basic usage of tags like code, pre, kbd, var and samp.

Inline

Wrap inline snippets of code with <code>.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

Sample text here...

<pre>Sample text here...</pre>

You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

User input

Use the <kbd> to indicate input that is typically entered via keyboard.

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Variables

For indicating variables use the <var> tag.

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Sample output

For indicating blocks sample output from a program use the <samp> tag.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Syntax highlighter

theDocs uses PrismJs to syntax highlight code snippets. You have to put your code inside <pre><code class="language-xxxx"> which xxxx is the name of language.

<p>Something to show in <strong>bold</strong> text.</p>
...
<i>Italic text</i>

If you need to include line numbers, add class .line-numbers to the <pre> tag.

<p>Something to show in <strong>bold</strong> text.</p>
...
<i>Italic text</i>

Supported languages

This is the list of all languages currently supported by Prism, with their corresponding alias, to use in place of xxxx in the language-xxxx class:

• HTML/XML markup
• CSS css
• C-like clike
• JavaScript javascript
• ActionScript actionscript
• ASP.NET (C#) aspnet
• Bash bash
• BASIC basic
• C c
• C# csharp
• C++ cpp
• CoffeeScript coffeescript
• F# fsharp
• Git git
• Go go
• Groovy groovy
• Haml haml
• Haskell haskell
• HTTP http
• Ini ini
• Jade jade
• Java java
• JSON json
• LaTeX latex
• Less less
• Makefile makefile
• Markdown markdown
• MATLAB matlab
• Objective-C objectivec
• Pascal pascal
• Perl perl
• PHP php
• Prolog prolog
• Python python
• R r
• React JSX jsx
• Ruby ruby
• Sass (Sass) sass
• Sass (Scss) scss
• Scalascala
• SQL sql
• Swift swift
• TypeScript typescript
• Wiki markup wiki
• YAML yaml

Line highlight

You specify the lines to be highlighted through the data-line attribute on the <pre> element, in the following simple format:

• A single number refers to the line with that number
• Ranges are denoted by two numbers, separated with a hyphen (-)
• Multiple line numbers or ranges are separated by commas.
• Whitespace is allowed anywhere and will be stripped off.

Examples:

• data-line="5" The 5th line
• data-line="1-5" Lines 1 through 5
• data-line="1,4" Line 1 and line 4
• data-line="1-2, 5, 9-20" Lines 1 through 2, line 5, lines 9 through 20

You can also link to specific lines on any code snippet, by using the following as a url hash: #{element-id}.{lines} where {element-id} is the id of the <pre> element and {lines} is one or more lines or line ranges that follow the format outlined above. For example, if there is an element with id="highlighter" on the page, you can link to lines 7-8 by linking to #highlighter.7-8

<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>

Code wrappers

If your code snippet includes several languages or a preview of result, it's better to use one of the following code wrappers.

Code window

Wrap your code and preview inside <div class="code-window">...</div> to show them in a window style with different tabs. In this way, reader can see one code snippet in a same time.

<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>

.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info    { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger  { color: #F44336; }
.text-purple  { color: #6D5CAE; }
.text-teal    { color: #00BFA5; }
.text-gray    { color: #bbbbbb; }
.text-dark    { color: #424242; }
.text-white   { color: #ffffff; }

$('.sidenav.dropable > li > a').click(function(e){
  if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
      return;
  }
  e.preventDefault();
  $(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
  $(this).next("ul").slideDown(300);
});

Here is the code which we used to draw above code window:

<div class="code-window">
  <div class="code-preview">...</div>
  <pre class="line-numbers"><code class="language-markup">...</code></pre>
  <pre class="line-numbers"><code class="language-css">...</code></pre>
  <pre class="line-numbers"><code class="language-javascript">...</code></pre>
</div>

Code tabs

Wrap your code and preview inside <div class="code-tabs">...</div> to show them in a horizontal tab style.

<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>

.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info    { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger  { color: #F44336; }
.text-purple  { color: #6D5CAE; }
.text-teal    { color: #00BFA5; }
.text-gray    { color: #bbbbbb; }
.text-dark    { color: #424242; }
.text-white   { color: #ffffff; }

$('.sidenav.dropable > li > a').click(function(e){
  if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
      return;
  }
  e.preventDefault();
  $(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
  $(this).next("ul").slideDown(300);
});

Here is the code which we used to draw above code tabs:

<div class="code-tabs">
  <div class="code-preview">...</div>
  <pre class="line-numbers"><code class="language-markup">...</code></pre>
  <pre class="line-numbers"><code class="language-css">...</code></pre>
  <pre class="line-numbers"><code class="language-javascript">...</code></pre>
</div>

Code snippet

Wrap your code and preview inside <div class="code-snippet">...</div> to show them in a vertical style. Use this style to show all of the codes in a same view.

<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>

.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info    { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger  { color: #F44336; }
.text-purple  { color: #6D5CAE; }
.text-teal    { color: #00BFA5; }
.text-gray    { color: #bbbbbb; }
.text-dark    { color: #424242; }
.text-white   { color: #ffffff; }

$('.sidenav.dropable > li > a').click(function(e){
  if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
      return;
  }
  e.preventDefault();
  $(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
  $(this).next("ul").slideDown(300);
});

Here is the code which we used to draw above code snippet:

<div class="code-snippet">
  <div class="code-preview">...</div>
  <pre class="line-numbers"><code class="language-markup">...</code></pre>
  <pre class="line-numbers"><code class="language-css">...</code></pre>
  <pre class="line-numbers"><code class="language-javascript">...</code></pre>
</div>